<template>
  <div
    @mouseenter="stop"
    @mouseleave="leave"
    class="relative"
    style="width: 100%; height: 100%"
    ref="personMonitor">
    <div class="until_title">人员监控</div>
    <transition-group
      class="scroll"
      :style="{height: `${height + 30}px`}"
      style="margin-top: -10px"
      @after-enter="enter"
      @after-leave="handleAfterLeave"
      name="list"
      tag="div">
      <div v-for="(item, index) in personData" v-show="index === currentIndex" :key="index + 1">
        <div class="person-top" ref="personTop">
          <p class="left person-title">{{item.name}}</p>
          <div class="right">
            <p class="left person-p">今日进场管理人员</p>
            <p class="left person-number" style="margin-right: 30px">{{manager}}</p>
            <p class="left person-p">今日进场劳务人员</p>
            <p class="left person-number">{{worker}}</p>
          </div>
        </div>
        <div :ref="item.ref" :style="{height: `${height}px`}" v-show="item.ref === 'personMonitorEchart'"></div>
        <div v-show="item.ref === 'personBarEchart'">
          <div class="personBar">
            <div class="personBar-left" ref="realTimeLeft">
              <div v-for="item in workType" style="max-width: 70px" :title="item">
                <p class="left ellipsis" style="max-width: 60px" >{{item}}</p>
                <div class="personBar-cr right">
                  <div class="cr-top"></div>
                  <div class="cr-centent"></div>
                  <div class="cr-bottom"></div>
                </div>
              </div>
            </div>
            <div class="personBar-right personDom" :ref="item.ref" :style="{height: `${realTimeheight - 22}px`}"></div>
          </div>
        </div>
      </div>
    </transition-group>
    <div class="scroll-left" @click="prev" v-show="visible">
      <i class="iconfont icon-t-arrow"></i>
    </div>
    <div class="scroll-right" @click="next"  v-show="visible">
      <i class="iconfont icon-r-arrow"></i>
    </div>
  </div>
</template>

<script>
  import recent from './recent.js'
  import realTime from './realTime.js'
  import { mapGetters } from 'vuex'
  export default {
    name: 'personMonitor',
    mixins: [recent, realTime],
    computed: {
      ...mapGetters({
        currentUser: 'currentUser'
      })
    },
    data () {
      return {
        timer: null,
        visible: false,
        firstIntoInitPersonBar: true,
        manager: 0,
        worker: 0,
        height: 0,
        realTimeheight: 0,
        currentIndex: 0,
        attendanceNumList: [],
        workType: [],
        workTypeData: [],
        personData: [
          {name: '近七天劳务出工情况', ref: 'personMonitorEchart'},
          {name: '实时劳务工种分布', ref: 'personBarEchart'}
        ]
      }
    },
    mounted () {
      this.getAttendanceNum()
      this.attendanceNumListFun()
      this.$nextTick(() => {
        const rectProson = this.$refs.personMonitor.getBoundingClientRect()
        const personTop = this.$refs.personTop[0].getBoundingClientRect()
        this.height = rectProson.height - personTop.height - 20
        this.$nextTick(() => {
          this.attendanceTotal().then(() => {
            this.setAttendanceTotalData()
          })
          this.init()
        })
      })
      if (!this.personMonitorInterval) {
        this.personMonitorInterval = setInterval(() => {
          this.getAttendanceNum()
          this.attendanceNumListFun().then(() => {
            if (this.currentIndex === 2) {
              this.initPersonBar()
            }
          })
          this.attendanceTotal().then(() => {
            if (this.currentIndex === 1) {
              this.setAttendanceTotalData()
            }
          })
        }, 1000 * 60 * this.$pollingTime)
      }
    },
    activated () {
      this.initData()
    },
    watch: {
      currentUser () {
        if (this.currentUser.mid && this.$route.name === 'projectVideo') {
          this.initData()
        }
      }
    },
    methods: {
      initData () {
        this.getAttendanceNum()
        this.attendanceNumListFun().then(() => {
          this.initPersonBar()
        })
        this.attendanceTotal().then(() => {
          this.setAttendanceTotalData()
        })
      },
      getAttendanceNum () {
        const data = {
          'stageId': this.currentUser.stageId
        }
        this.$axios({
          method: 'post',
          url: `${this.$site.videoServer}/api/screen/getAttendanceNum`,
          data: this.$qs.stringify(data, {indices: false})
        }).then(res => {
          this.manager = res.data.data.manager
          this.worker = res.data.data.worker
        })
      },
      attendanceTotal () {
        return new Promise(resolve => {
          const data = {
            'stageId': this.currentUser.stageId
          }
          this.$axios({
            method: 'post',
            url: `${this.$site.videoServer}/api/screen/attendanceDetail`,
            data: this.$qs.stringify(data, {indices: false})
          }).then(res => {
            this.personMonitorObj = res.data.data
            resolve()
          })
        })
      },
      attendanceNumListFun () {
        return new Promise(resolve => {
          const data = {
            'stageId': this.currentUser.stageId
          }
          this.$axios({
            method: 'post',
            url: `${this.$site.videoServer}/api/screen/attendanceNumList`,
            data: this.$qs.stringify(data, {indices: false})
          }).then(res => {
            this.attendanceNumList = res.data.data
            resolve()
          })
        })
      },
      init () {
        if (!this.timer) {
          this.timer = setInterval(() => {
            if (this.$route.name === 'projectVideo') {
              this.currentIndex++
              if (this.currentIndex > this.personData.length - 1) {
                this.currentIndex = 0
              }
            }
          }, 1000 * 8)
        }
      },
      prev () {
        this.currentIndex--
        if (this.currentIndex < 0) {
          this.currentIndex = 1
        }
      },
      next () {
        this.currentIndex++
        if (this.currentIndex > this.personData.length - 1) {
          this.currentIndex = 0
        }
      },
      stop () {
        this.visible = true
        window.clearInterval(this.timer)
        this.timer = null
      },
      leave () {
        this.visible = false
        this.init()
      },
      enter () {
        if (this.currentIndex === 1) {
          if (this.firstIntoInitPersonBar) {
            this.firstIntoInitPersonBar = false
            this.initPersonBar()
          }
        }
      },
      handleAfterLeave () {}
    }
  }
</script>

<style scoped lang='scss'>
  .person-top{
    height: 30px;
    .person-title{
      color: #34cddd;
      font-weight: bold;
      font-size: 16px;
      line-height: 30px;
    }
    .person-p{
      width: 60px;
      margin-right: 10px;
      white-space: initial;
    }
    .person-number{
      color: #fff;
      font-weight: bold;
      font-size: 20px;
      line-height: 30px;
    }
  }
  .personBar{
    margin-top: 5px;
    display: table;
    width: 100%;
    .personBar-left{
      box-sizing: border-box;
      padding-left: 10px;
      width: 80px;
      display: table-cell;
      vertical-align: top;
      >div{
        height: 31px;
        line-height: 27px;
        .personBar-cr{
          .cr-top{
            width: 2px;
            height: 7px;
            margin-left: 3px;
            background: #1c6579;
          }
          .cr-centent{
            width: 6px;
            height: 6px;
            border-radius: 50%;
            border: 1px #00e8ff solid;
            margin: 3px 0;
          }
          .cr-bottom{
            width: 2px;
            height: 10px;
            margin-left: 3px;
            background: #1c6579;
          }
        }
      }
    }
    .personBar-right{
      display: table-cell;
      vertical-align: top;
    }
  }
</style>
